<template>
  <div>
    <div class="n-layout-page-header">
      <a-card :bordered="false" title="表单详情">
        表单除了提交数据，有时也用于显示只读信息。
      </a-card>
    </div>
    <a-card
      :bordered="false"
      title="基本信息"
      class="mt-3 proCard"
      :segmented="{ content: 'hard' }"
    >
      <a-descriptions :data="basicData" label-placement="left" class="py-2" />
    </a-card>
    <a-card
      :bordered="false"
      title="其它信息"
      class="mt-3 proCard"
      :segmented="{ content: 'hard' }"
    >
      <a-descriptions :data="otherData" label-placement="left" class="py-2" />
    </a-card>
    <a-card
      :bordered="false"
      title="表格信息"
      class="mt-3 proCard"
      :segmented="{ content: 'hard' }"
    >
      <a-table :data="dataSource" :columns="columns" :pagination="false" />
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref, h } from 'vue';
  import { Button } from '@arco-design/web-vue';

  const basicData = ref([
    { label: '收款人姓名', value: '啊俊' },
    { label: '收款账户', value: 'NaiveUiAdmin@qq.com' },
    { label: '付款类型', value: 'NaiveUiAdmin@163.com' },
    { label: '转账金额', value: '￥1980.00' },
    { label: '状态', value: '已到账' },
  ]);

  const otherData = ref([
    { label: '城市', value: '深圳' },
    { label: '性别', value: '男' },
    { label: '邮箱', value: 'NaiveUiAdmin@qq.com' },
    { label: '地址', value: '广东省深圳市南山区' },
    { label: '生日', value: '1991-06-04' },
    { label: '认证', value: '已认证' },
  ]);

  const dataSource = [
    {
      id: 1,
      name: 'Ah jung',
      age: '男',
      city: '深圳',
      birthday: '2000-11-09',
    },
    {
      id: 2,
      name: '西门飞雪',
      age: '男',
      city: '广州',
      birthday: '1991-09-11',
    },
    {
      id: 3,
      name: '泰坦巨人',
      age: '男',
      city: '北京',
      birthday: '1990-11-03',
    },
    {
      id: 1,
      name: '猎魔人',
      age: '女',
      city: '浙江',
      birthday: '2001-11-09',
    },
  ];

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '性别',
      dataIndex: 'age',
    },
    {
      title: '城市',
      dataIndex: 'city',
    },
    {
      title: '生日',
      dataIndex: 'birthday',
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: 180,
      render() {
        return [
          h(
            Button,
            {
              style: { 'margin-right': '10px' },
              type: 'primary',
              status: 'danger',
            },
            {
              default: () => '删除',
            },
          ),
          h(
            Button,
            {
              type: 'primary',
            },
            {
              default: () => '查看',
            },
          ),
        ];
      },
    },
  ];
</script>

<style lang="less" scoped></style>
